<template>
  <!-- 提交审核 -->
  <div class="myDeploylist">
    <div class="cont">
      <span>订单详情 </span>
      <el-button>返 回</el-button>
      <el-button>取消订单</el-button>
    </div>
    <div class="details">
      <el-steps :active="active" align-center>
        <el-step title="待审核"></el-step>
        <el-step title="待投放"></el-step>
        <el-step title="投放中"></el-step>
        <el-step title="已完成"></el-step>
      </el-steps>
      <div class="con">
        <span><img src="static/images/shu.png" alt="">订单号：in93475777039450998349</span>
        <span><img src="static/images/shu1.png" alt="">提交审核时间：2018-08-16 09:34:45</span>
      </div>
    </div>
    <div class="details">
      <p>投放模式：按展示量</p>
      <div class="title">广告物料</div>
      <el-table border :data="tableData1" style="width: 100%">
        <el-table-column prop="ID" label="ID"></el-table-column>
        <el-table-column prop="wz" label="投放位置"></el-table-column>
        <el-table-column prop="icon" label="图标">
          <template slot-scope="scope">
            <el-button type="text" @click="show(scope.row.icon)">预览</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="icon1" label="图标">
          <template slot-scope="scope">
            <el-button type="text" @click="show(scope.row.icon1)">预览</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="cont" label="广告内容">
          <template slot-scope="scope">
            <el-button type="text" @click="show(scope.row.cont)">预览</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="details">
      <div class="title">投放范围</div>
      <el-table border :data="tableData2" style="width: 100%">
        <el-table-column prop="jdmc" label="酒店名称"></el-table-column>
        <el-table-column prop="qymc" label="企业名称"></el-table-column>
        <el-table-column prop="hylist1" label="行业一级类别"></el-table-column>
        <el-table-column prop="hylist2" label="行业一级类别"></el-table-column>
        <el-table-column prop="hylist1" label="价格"></el-table-column>
      </el-table>
    </div>
    <div class="details">
      <div class="title">投放时间</div>
      <el-table border :data="tableData3" style="width: 100%">
        <el-table-column prop="kstitle" label="开始时间"></el-table-column>
        <el-table-column prop="jstitle" label="结束时间"></el-table-column>
        <el-table-column prop="tiannum" label="投放天数"></el-table-column>
      </el-table>
    </div>
    <el-dialog :visible.sync="showModal">
      <img :src="imgSrc">
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: "advertisingDetails",
  data() {
    return {
      active: 0,
      imgSrc: "",
      showModal: false,
      tableData1: [
        {
          ID: "234",
          wz: "屏保图片",
          icon: "static/images/cefu.png",
          icon1: "static/images/cefu.png",
          cont: "static/images/cefu.png"
        },
        {
          ID: "234",
          wz: "屏保图片",
          icon: "static/images/cefu.png",
          icon1: "static/images/cefu.png",
          cont: "static/images/cefu.png"
        }
      ],
      tableData2: [
        {
          jdmc: "香格里拉大酒店",
          qymc: "香格里拉大酒店",
          hylist1: "酒店",
          hylist2: "单体酒店",
          hylist1: "0.00"
        },
        {
          jdmc: "香格里拉大酒店",
          qymc: "香格里拉大酒店",
          hylist1: "酒店",
          hylist2: "单体酒店",
          hylist1: "0.00"
        }
      ],
      tableData3: [
        {
          kstitle: "2018-12-23  12:00:00",
          jstitle: "2018-12-23  12:00:000",
          tiannum: "7"
        },
        {
          kstitle: "2018-12-23  12:00:00",
          jstitle: "2018-12-23  12:00:00",
          tiannum: "7"
        }
      ]
    }
  },
  methods: {
    show(imgSrc) {
      this.imgSrc = imgSrc
      this.showModal = true
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" >
.myDeploylist {
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 30px;
  .details {
    border: 1px solid #f7f7f7;
    border-radius: 5px;
    margin: 30px 0;
    &:nth-child(3) {
      .el-table__row td:nth-child(3),
      .el-table__row td:nth-child(4),
      .el-table__row td:nth-child(5) {
        color: #0a95dd;
      }
    }
    &:nth-child(3),
    &:nth-child(4),
    &:nth-child(5) {
      padding: 1% 3%;
      .title {
        color: #ff8b00;
      }
      .el-table {
        border-radius: 6px;
        margin: 16px 0;
        text-align: center;
        .has-gutter th {
          text-align: center;
          background: #faf8f5;
        }
      }
    }
    .con {
      margin-top: 18px;
      padding: 15px 4%;
      background: #faf8f5;
      span {
        img {
          position: relative;
          top: 2px;
          margin-right: 6px;
        }
        &:last-child {
          float: right;
        }
      }
      img {
        height: 16px;
      }
    }
  }
  .cont {
    text-align: right;
    span {
      font-size: 18px;
      float: left;
    }
    .el-button {
      span {
        font-size: 14px;
      }
      &:last-child {
        color: #fff;
        background: #ff8b00;
        border: 1px solid #ff8b00;
      }
      &:nth-child(2) {
        color: #ff8b00;
        border: 1px solid #ff8b00;
        background: none;
      }
    }
  }
  img {
    max-width: 100%;
    height: auto;
    display: inline-block;
  }
  .el-steps.el-steps--horizontal {
    position: relative;
    width: 100%;
    top: 0;
    padding: 30px 0 20px;
    .el-step {
      .el-step__line {
        height: 13px;
        background: url("/../static/images/yin1_06.png");
        top: 24px;
      }
      .el-step__icon.is-text {
        background: url(/../static/images/yinH_03.png) no-repeat center;
        background-size: cover;
        width: 56px;
        height: 56px;
        border: none;
        font-size: 26px;
      }
      .el-step__title.is-process,
      .el-step__title.is-finish {
        color: #ff8b00;
      }
      .is-finish {
        .el-step__line-inner {
          border-width: 1px;
          width: 100% !important;
          height: 3px;
          background: #ff8b00;
          border: none;
          top: 5px;
          position: absolute;
        }
      }
      .is-process,
      .is-finish {
        .el-step__icon-inner {
          color: #fff;
          width: 40px;
          height: 40px;
          background: #ff8b00;
          border-radius: 50%;
          display: inline-flex;
          -webkit-box-pack: center;
          -ms-flex-pack: center;
          justify-content: center;
          -webkit-box-align: center;
          -ms-flex-align: center;
          align-items: center;
          position: relative;
        }
      }
    }
  }
}
.myDeploylist .el-dialog__body img{ display: block; margin: 0 auto;}
</style>
